<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-main class="nopadding">
			<scTable
				ref="table"
				tableName="stuToBeReviewedList"
				v-bind="list"
				row-key="id"
				stripe
				:vritualData="vritualData"
				:setUpType="false"
				:hidePropOrder="true"
			>
				<el-table-column
					label="操作"
					width="120"
					fixed="right"
					align="center"
				>
					<template #default="scope">
						<el-button
							type="primary"
							plain
							size="small"
							@click="viewDetail(scope.row)"
						>
							毕业审核
						</el-button>
					</template>
				</el-table-column>
			</scTable>
			<GraduateDialog ref="graduateDialogRef" />
		</el-main>
	</el-container>
</template>

<script>
import SearchForm from "@/components/SearchForm/index.vue";
import GraduateDialog from "./GraduateInfo.vue"

export default {
	components: {
		SearchForm,
		GraduateDialog,
	},
	data() {
		return {
			formColumn: [
				{
					component: "el-input",
					label: "学员姓名",
					prop: "studentName",
				},
				{
					component: "el-input",
					label: "联系电话",
					prop: "phone",
				},
			],
			list: {
				apiObj: this.$API.student.graduate,
				params: {},
        column: [
          {
            label: "学员姓名",
            prop: "studentName",
            width: "",
          },
          {
            label: "班别名称",
            prop: "gradeName",
            width: "",
          },
          {
            label: "课次",
            prop: "times",
            width: "",
          },
          {
            label: '开班时间',
            prop: "starTime",
            width: "",
          },
          {
            label: "结班时间",
            prop: "endTime",
            width: "",
          },
          {
            label: "校区",
            prop: "schoolName",
            width: "",
          },
          {
            label: "联系电话",
            prop: "phone",
            width: "",
          }
        ]
			},
			vritualData: [{ studentName: "123" }],
		};
	},
	methods: {
    viewDetail(row) {
      this.$refs.graduateDialogRef.openDialog(row)
    },
		search(searchParams) {
      let params = {}
			if(searchParams) {
				const searchObj = JSON.parse(JSON.stringify(searchParams))
				params = Object.assign({}, searchObj, this.list.params)
			}else{
				params = Object.assign({}, this.list.params, {});
			}
			console.log(params);
			this.$refs.table.reload(params);
		},
	},
};
</script>

<style scoped lang="scss">
.attend {
	& > div {
		display: flex;
		align-items: center;
	}
	.poin {
		width: 14px;
		height: 14px;
		background-color: #1ada82;
		border-radius: 50%;
		margin-right: 8px;
		display: inline-block;
	}
	.poin1 {
		background-color: #ff4a3f;
	}
	.poin2 {
		background-color: #ffcb3f;
	}
}
</style>
